/**
    2023/6/1
    结算页面
*/
<template>
    <div>
        <TopNav />
        <div style="max-width:1200px;margin:auto;margin-top: 30px;">

            <div>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>购物车结算</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!--收件人地址-->
            <div style="margin-top:50px">
                <h3>收件人地址</h3>
                <el-row style="text-align:left;background: aliceblue;">
                    <el-col :span="4" v-for="(item, index) in addressListData" :key="index">
                        <div :class="{ activbg: selectedAddressIndex == index, addressbox }">
                            <div class="info" @click="eventSelectedAddress(index, item)">
                                <div>姓名：{{ item.name }}</div>
                                <div>电话：{{ item.phone }}</div>
                                <div>地址：{{ item.address }}</div>
                                <div class="opt" style="font-size:10px;color:#fff;background:gainsboro;">
                                    <span>修改</span> | <span>删除</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="text" @click="dialogEditAddress">添加新地址</el-button>
                    </el-col>
                </el-row>
            </div>

            <!--商品信息-->
            <div>
                <h3>商品列表</h3>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="图片" width="180"></el-table-column>
                    <el-table-column prop="date" label="名称" width="180"></el-table-column>
                    <el-table-column prop="productPrice" label="价格" width="180"></el-table-column>
                    <el-table-column prop="productNumber" label="数量" width="180">
                    </el-table-column>
                    <el-table-column label="小计">
                        <template slot-scope="scope">
                            <span style="color:red; font-weight:600;font-size:20px;"> {{ (scope.row.productPrice *
                                scope.row.productNumber).toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div>
                <div>总价：<span style="font-size:40px;color:red;font-weight:600;">￥{{ total.toFixed(2) }}</span></div>
                <div style="text-align:right;"><el-button type="danger" style="font-size:20px;width:200px;height:50px;"
                        @click="eventSubmitOrder">提交订单</el-button></div>
            </div>

            <!--dialog-->
            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="城市" :label-width="formLabelWidth">
                        <el-cascader v-model="form.city" :options="cityListData" @change="handleChange"
                            :props="{ label: 'name', value: 'name' }"></el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否默认" :label-width="formLabelWidth">
                        <el-switch v-model="form.isDefault" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="eventAddAddress">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import TopNav from '@/components/TopNav.vue'

export default {
    components: {
        TopNav
    },
    data() {
        return {
            tableData: [],//结算的商品列表,
            total: 0,
            cityListData: [],
            value: true,
            dialogFormVisible: false,
            form: {
                name: '',
                phone: '',
                address: '',
                isDefault: true,
                city: []
            },
            formLabelWidth: '120px',
            addressListData: [],
            selectedAddressIndex: 0, //选中的地址的样式
            memberId: '',
            recived: {  //收件人信息
                address: '',
                name: '',
                phone: ''
            }
        }
    },
    created() {

        //接收购物车选中的商品
        this.tableData = this.$route.params.data
        if (this.$route.params.data == null) {
            this.$router.push('/car/list')
        }

        this.tableData.forEach(x => {
            this.total += x.productNumber * x.productPrice
        })

        //从缓存获取登录的用户的Id 
        let member = localStorage.getItem("2011A_member_info")
        if (member == null) {
            this.$router.push('/login')
        }
        this.memberId = JSON.parse(member).id

        //加载这个用户的收件人地址
        this.onloadAddressData()

        //用于判断默认地址初始化的时候被选中
        this.addressListData.forEach((x, index) => {
            if (x.isDefault) {
                this.selectedAddressIndex = index
                this.recived.address = x.address
                this.recived.name = x.name
                this.recived.phone = x.phone
            }
        })

    },
    methods: {
        //提交订单按钮事件
        eventSubmitOrder() {
            let url = this.$baseUrl + '/order'
            let data = {
                "memberId": this.memberId,
                "recivedAddress": this.addressListData[this.selectedAddressIndex].address, // this.recived.address,
                "recivedName": this.addressListData[this.selectedAddressIndex].name,
                "recivedPhone": this.addressListData[this.selectedAddressIndex].phone,
                "remark": "",
                "total": this.total,
                "details": []
            }
            this.tableData.forEach(x => {
                data.details.push({
                    "productId": x.productSkuId,
                    "productImage": x.productImage,
                    "productName": x.productName,
                    "productNumber": x.productNumber,
                    "productPrice": x.productPrice
                })
            })
            console.log(this.tableData)
            this.$http.post(url, data).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    //跳转到待支付页面
                    this.$router.push('/pay?orderNo='+res.data.data)
                }
            })
        },
        dialogEditAddress() {
            this.dialogFormVisible = true
            this.onloadCityData()
        },
        handleChange() {

        },
        onloadCityData() {
            let url = this.$baseUrl + '/city'
            this.$http.get(url).then(res => {
                this.cityListData = res.data
            })
        },
        //加载地址列表
        onloadAddressData() {
            let url = this.$baseUrl + '/address/bymemberid'
            this.$http.get(url, {
                params: {
                    memberId: this.memberId
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.addressListData = res.data.data
                }
            })
        },
        //弹框添加地址提交事件
        eventAddAddress() {
            let url = this.$baseUrl + '/address'
            let data = {
                "memberId": this.memberId,
                "name": this.form.name,
                "address": this.form.address,
                "phone": this.form.phone,
                "city": this.form.city.toString(),
                "isDefault": this.form.isDefault
            }
            this.$http.post(url, data).then(res => {
                console.log(res)

                this.dialogFormVisible = false

            })
        },
        //地址选中事件
        eventSelectedAddress(index, item) {
            this.selectedAddressIndex = index
            this.recived.address = item.address
            this.recived.name = item.name
            this.recived.phone = item.phone
        },
    }
}
</script>

<style scoped>
.activbg {
    background: red;
}

.opt {
    display: none;
}

.addressbox {
    margin: 10px 20px;
    background: #fff;
    border-radius: 10px;
}

.info {
    min-height: 100px;
    margin: 0 20px;
    border-radius: 10px;
}

.info:hover .opt {
    display: block;
}
</style>